<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>
    <link rel="stylesheet" href="css/table.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <!-- <link rel="stylesheet" href="/btt.css"> -->
    <link rel="stylesheet" href="css/bootstrap-table-fixed.css">
    <link rel="stylesheet" href="css/bootstrap-table-jump.css">
  </head>
  <body>
<div>
    <!-- 
      表格内容不换行 text-nowrap
      斑马纹        table-striped
    -->
    <div class="webmenu">
      <div class="left">
        <img src="./img/logo.png" alt="" class="logoimg">
          <div class="logo">
            <div class="top">
              <span class="bigfont">XX公司</span>
              <span class="smallfont">Company</span>
            </div>
            <div class="bottom">
              <span class="bigfont">江苏省XXX有限公司</span>
              <span class="smallfont">xxxxx xxxxxx xxxx</span>
            </div>
          </div>
        <div class="title">
          <img src="./img/title.jpg" alt="">
          <span>应 用 名 称</span>
        </div>
      </div>
      <div class="right">
        <div class="input">
          <img src="./img/search.png" alt="">
          <input type="text" placeholder="搜索内容">
          <div class="searchbtn">后缀</div>
        </div>
        <div class="menuone">
          <div class="font">一级菜单
            <!-- <ul class="hoverul">
              <li>二级标题</li>
              <li>二级标题</li>
              <li>二级标题</li>
            </ul> -->
          </div>
        </div>
        <div class="menutwo">
          <div class="font">一级菜单
            <!-- <ul class="hoverul">
              <li>二级标题</li>
              <li>二级标题</li>
              <li>二级标题</li>
            </ul> -->
          </div>
        </div>
        <div class="user">
          <img src="./img/headphoto.jpg" alt="">
          <span>用户昵称</span>
        </div>
      </div>
    </div>
    <div style="width: 100%;">
      <div class="webtop">
        <div class="bread">
          <span class="first">应用名称></span>
          <span>一级标题></span>
          <span class="checked">二级标题</span>
        </div>
      </div>
      <div class="webtab">
        <div class="title">
          <img src="./img/webtitle.jpg" alt="">
          <span>页面标题</span>
        </div>
        <div class="tabone">
          <div class="titlesmall">标题分类一</div>
          <div class="titlebigg">
            <div class="titlebig">
              <img src="./img/titleone.jpg" alt="">
              <span class="content">一级标题</span>
              <img src="./img/tabclose.jpg" alt="" class="tabactive">
            </div>
            <ul class="ul">
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
            </ul>
          </div>
          <div class="titlebigg">
            <div class="titlebig">
              <img src="./img/titletwo.jpg" alt="">
              <span class="content">一级标题</span>
              <img src="./img/tabclose.jpg" alt="" class="tabactive">
            </div>
            <ul class="ul">
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
            </ul>
          </div>
          <div class="titlebigg">
            <div class="titlebig">
              <img src="./img/titlethree.jpg" alt="">
              <span class="content">一级标题</span>
              <img src="./img/tabclose.jpg" alt="" class="tabactive">
            </div>
            <ul class="ul">
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
            </ul>
          </div>
        </div>
        <div class="tabtwo">
          <div class="titlesmall">标题分类二</div>
          <div class="titlebigg">
            <div class="titlebig">
              <img src="./img/titlefour.jpg" alt="">
              <span class="content">一级标题</span>
              <img src="./img/tabclose.jpg" alt="" class="tabactive">
            </div>
            <ul class="ul">
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
            </ul>
          </div>
          <div class="titlebigg">
            <div class="titlebig">
              <img src="./img/titlefive.jpg" alt="">
              <span class="content">一级标题</span>
              <img src="./img/tabclose.jpg" alt="" class="tabactive">
            </div>
            <ul class="ul">
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
            </ul>
          </div>
          <div class="titlebigg">
            <div class="titlebig">
              <img src="./img/titlesix.jpg" alt="">
              <span class="content">一级标题</span>
              <img src="./img/tabclose.jpg" alt="" class="tabactive">
            </div>
            <ul class="ul">
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
            </ul>
          </div>
        </div>
        <div class="tabthree">
          <div class="titlesmall">标题分类三</div>
          <div class="titlebigg">
            <div class="titlebig">
              <img src="./img/titlefour.jpg" alt="">
              <span class="content">一级标题</span>
              <img src="./img/tabclose.jpg" alt="" class="tabactive">
            </div>
            <ul class="ul">
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
            </ul>
          </div>
          <div class="titlebigg">
            <div class="titlebig">
              <img src="./img/titlefive.jpg" alt="">
              <span class="content">一级标题</span>
              <img src="./img/tabclose.jpg" alt="" class="tabactive">
            </div>
            <ul class="ul">
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
            </ul>
          </div>
          <div class="titlebigg">
            <div class="titlebig">
              <img src="./img/titlesix.jpg" alt="">
              <span class="content">一级标题</span>
              <img src="./img/tabclose.jpg" alt="" class="tabactive">
            </div>
            <ul class="ul">
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
              <li class="li">二级标题</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="tabletab">
        <ul class="tableul">
          <!-- <li class="tableli">二级标题<span class="delete">x</span></li> -->
        </ul>
      </div>
      <div class="tablecontent">
          <div class="first">首页 内容请点击tab</div>
          <div class="content">
            <div class="search sone">
              <div class="onediv">
                <img src="./img/three.png" alt="">
                类别:<select name="choose" id="choose"> 
                  <option value="none" selected disabled hidden>请选择</option>
                  <option value="two">下行（发送）</option>
                  <option value="three">操作一</option>
                  <option value="three">操作二</option>
                </select>
              </div>
              <div class="twodiv">
                业务系统名称:<input type="text" placeholder="例：系统名称" id="searchtext">
              </div>
              <div class="threediv">
                短信内容:<input type="text" placeholder="例：XX交易平台（关键字）" id="searchtext">
              </div>
              <div class="fourdiv">
                手机号码:<input type="text" placeholder="例：180-1302-1815" id="searchtext">
              </div>
            </div>
            <div class="search">
              <div class="divone">
                <img src="./img/three.png" alt="">
                通道:<select name="choose" id="choose"> 
                  <option value="none" selected disabled hidden>请选择</option> 
                  <option value="one">操作一</option>
                  <option value="two">操作二</option>
                  <option value="three">操作三</option>
                </select>
              </div>
              <div class="divtwo">
                业务系统编码:<input type="text" placeholder="例：编码内容" id="searchtext">
              </div>
              <div class="divthree">
                <img src="./img/three.png" alt="">
                短信状态:<select name="choose" id="choose"> 
                  <option value="none" selected disabled hidden>请选择</option> 
                  <option value="one">操作一</option>
                  <option value="two">操作二</option>
                  <option value="three">操作三</option>
                </select>
              </div>
              <div class="divfour">
                <img src="./img/time.png" alt="">
                <span>-</span>
                <span>-</span>
                <span>:</span>
                <span>:</span>
                接收时间:<input type="datetime-local" value="2022-11-28T10:30:05" id="searchtext">
              </div>
              <div class="searchbtn">查 询</div>
              <div class="researchbtn">重 置</div>
            </div>
            <div id="toolbar">
              <label>
                <div class="bone"><img src="./img/btnw.png" alt="" style="width: 15px;height:15px;"> 主按钮</div>
                <div><img src="./img/btng.png" alt="" style="width: 15px;height:15px;"> 次按钮</div>
                <div><img src="./img/btng.png" alt="" style="width: 15px;height:15px;"> 次按钮</div>
                  <img class="selectimg" src="./img/three.png" alt="">
                  <select name="play" id="play">
                    <option value="none" selected disabled hidden>更多操作</option> 
                    <option value="one">操作一</option>
                    <option value="two">操作二</option>
                    <option value="three">操作三</option>
                  </select>
                <div id="bar">
                  <img src="./img/write.png" alt="">
                  <img src="./img/delete.png" alt="">
                  <img src="./img/full.png" alt="">
                </div>
              </label>
            </div>
            <table class="table text-nowrap" id="table" style="table-layout:fixed;width:100%"></table>
          </div>
          <div class="content">二级标题内容一</div>
          <div class="content">二级标题内容二</div>
        </div></div>
    </div>
    <div id="menu" style="display: none;">
      <ul>
        <li class="closeothers">关闭其他标签</li>
        <li class="closeright">关闭右侧标签</li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <script src="js/bootstrap-table.js"></script>
    <script src="js/bootstrap-table-zh-CN.js"></script>
    <!-- <script src="https://unpkg.com/bootstrap-table@1.21.1/dist/bootstrap-table.min.js"></script>  -->
    <!-- <script src="https://unpkg.com/bootstrap-table@1.21.1/src/locale/bootstrap-table-zh-CN.js"></script> -->
    <script src="https://unpkg.com/bootstrap-table@1.21.0/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.min.js"></script>
    <!-- <script src="https://unpkg.com/bootstrap-table@1.21.1/dist/extensions/page-jump-to/bootstrap-table-page-jump-to.min.js"></script> -->
    <script src="js/table.js"></script>
    <script src="js/bootstrap-table-jump.js"></script>
  </body>
</html>